@extends('Admin.Layouts.layout')
@section('title','后台管理系统')
@section('style')
    <style>

    </style>
@endsection
@section('content')
    <div class="lyl-content">
        <div class="am-cf admin-main2">
            <div class="admin-content">
                <div class="admin-content-body">
                    <div class="am-g am-animation-slide-right">
                        <form class="am-form am-form-horizontal" action="" method="post" id="from1" @submit.prevent ="handle()">
                            <div class="am-g am-margin-top">
                                <div class="am-u-sm-12">
                                    <div class="am-u-sm-3  am-text-right">权限组：</div>
                                    <div class="am-u-sm-4">

                                        <select class="" name="group_id" id="" v-model="data.group_id">
                                            <option v-if="data.length==0" value="undefined">请选择权限组</option>
                                            <option v-for="item in group" v-model="item.group_id" class="">@{{ item.title }}</option>
                                        </select>


                                        <input type="hidden" name="admin_id" v-model="data.admin_id">
                                        {!! csrf_field() !!}
                                    </div>
                                    <div class="am-u-sm-4"></div>
                                </div>
                            </div>

                            <div class="am-g am-margin-top">
                                <div class="am-u-sm-12">
                                    <div class="am-u-sm-3  am-text-right">用户名：</div>
                                    <div class="am-u-sm-4">
                                        <input type="text" class="am-input-sm" name="username" required v-model="data.username" placeholder="请输入用户名">
                                    </div>
                                    <div class="am-u-sm-4"></div>
                                </div>
                            </div>

                            <div class="am-g am-margin-top">
                                <div class="am-u-sm-12">
                                    <div class="am-u-sm-3  am-text-right">密码：</div>
                                    <div class="am-u-sm-4">
                                        <input type="text" @click="password" id="password" class="am-input-sm" name="password" placeholder="请输入密码">
                                    </div>
                                    <div class="am-u-sm-4"></div>
                                </div>
                            </div>

                            <div class="am-g am-margin-top">
                                <div class="am-u-sm-8 am-u-sm-offset-2">
                                    <button type="submit" class="am-btn am-btn-secondary" v-if="data.length===0">添加管理员</button>
                                    <button type="submit" class="am-btn am-btn-secondary" v-else>修改管理员</button>
                                </div>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        var vm = new Vue({
            el:'.lyl-content', //挂载点：主体页面
            data:{
                data : {!! $data['admin'] or "[]" !!},
                group : {!! $data['group'] !!}
            },
            methods:{
                password:function(){
                    $("#password").attr("type","password");
                },
                handle:function(){
                    $.post("{{ url("admin/admin/handle") }}",$("#from1").serialize(),function (data) {
                        if(data['status'] == "200"){
                            layer.msg(data['text'],{icon:1,time:1000},function () {
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.location.reload()
                                parent.layer.close(index);
                            })
                        }else{
                            layer.msg(data['text'],{icon:2,time:1000});
                        }
                    });

                }
            }
        });


    </script>
@endsection